Component spectrum
Component spectrum
最上位にはコンポーネントがあり、各設計システム内に存在し、これらすべての部分をまとめて構成
Behavior Hook spectrum
State Hook spectrum
テーマとデザイン システム固有のロジックを提供し、実際のプラットフォーム要素をレンダリング
さまざまな方法 (CSS クラス、CSS-in-JS など) で実装できるスタイルを適用
Behavior Hook spectrumによって返されるプロパティとState Hook spectrumからの状態を使用して、外観を実装
Behavior Hook spectrumから返されたプロパティをレンダリングする要素に展開してセマンティクスとインタラクションを適用し、状態フックからの状態を使用して外観を調整できます。
これにより、スタイル設定やレイアウト制御に必要な追加要素の追加など、コンポーネントのレンダリングを完全に制御できるようになります。
コンポーネント自体は、スタイルのない部分とスタイルのある部分に分割される場合があります。
スタイルのないコンポーネントはフックを構成し、再利用可能なコンテキスト、DOM 構造、およびスタイリング API を提供することで、コンポーネントを接続するために必要な接着コードを抽象化します。
これにより、必要に応じて下位レベルの API にドロップダウンできる柔軟性を維持しながら、設計システム コンポーネントが簡素化されます。
一部のComponent spectrumには、State Hook spectrumやBehavior Hook spectrumが含まれているわけではない。
単純なcomponentは、State 状態を必要としないから。
q:
仮に、単純なcomponentでhooks reactが無い場合、そのcomponentって、React Server Components RSCで利用可能だったりする?